<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        body{
            height: 2000px;
        }
        span{
            position: fixed;
            right: 0;
            width: 20px;
            height: 60px;
            display: inline-block;
            line-height: 60px;
            text-align: center;
            border-radius:12px 0 0 12px; 
        }
        span:nth-child(1){
            top: 42vh;
            background-color: darkred;
        }
        span:nth-child(2){
            top: 49vh;
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <span class="s">▲</span>
    <span class="x">▽</span>
</body>
</html>
<script>
    
    $('span').hover(function(){
        $(this).stop().animate({width: 150,'border-top-left-radius':'12px','border-bottom-left-radius':'12px'},500)
    },function(){
        $(this).stop().animate({width: 20},300)
    })
    $('span').eq(0).click(function(){
        $('html,body').animate({scrollTop:0},1000);//回到顶端
    })
    $('span').eq(1).click(function(){
        $('html,body').animate({scrollTop:2000},1000);//回到顶端
    })
</script>